<!--
 * @Author: your name
 * @Date: 2021-08-11 14:25:10
 * @LastEditTime: 2021-08-11 17:13:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \昆山杰普实习基地\网易严选\网易严选-人气推荐.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选</title>
    <style>
        html,body{
            color: #333;
            margin: 0;
            padding: 0;
            width: 1250px;
        }
        .header{
            height:100px;
            margin-top: 60px;
        }
        /* 选择器 */
         .popularity{
        height: 740px;
        background-color: #f4f0eb;
         }
         .header>.name{
             font-size: 28px;
             padding-top: 60px;
             margin: 0px 20px 0px 100px;
             display: inline-block;
         }
         .header>.name:hover{
             color: #b4a078;
             cursor: pointer;
         }
         .headerLeft{
             display: inline-block;
             margin: 10px 20px 10px 10px;
             padding-left: 10px;
             padding-right: 10px;
         }
         .headerLeft:hover{
             cursor: pointer;
             color: #b1a07d;
         }
         .checked{
             color: #b1a07d;
             border-bottom: 2px solid #b1a07d;
         }
         .headerRight{
             margin-top: 77px;
             margin-right: 60px;
             float: right;
             display: block;
         }
         .headerLeft,.headerRight{
             font-size: 14px;
         }
         #productItemFirst{
            float: left;

             margin-left: 0px;
             width: 390px;
             height: 570px;
             background-color: white;
         }
         .productItem{
            margin-left: 10px;
             float: left;
             width: 223px;
             height: 280px;
             background-color: white;
         }
         .product>:nth-child(5),
         .product>:nth-child(6),
         .product>:nth-child(7){
            margin-top: 10px;
            
         }
         .product{
             margin-left:100px;
             margin-top: 20px;
         }
         /* #productItemFirst>img{

        } */
         #productItemFirst>img:nth-child(2){
             margin: 35px 30px;
         }
         #productItemFirst>img:first-child{
             position: absolute;
             width: 48px;
             height: 48px;
         }
         #productItemFirst>img:nth-child(2):hover{
             width: 336px;
             height: 336px;
             cursor: pointer;
         }
         .title{
             font-size: 18px;
             width: 100%;
             text-align: center;
             border-top: 2px solid #f4f0eb;
         }
         .product>.name{
            margin: 40px 71px 13px 71px;
         }
         .title>.price{
             color: red;
         }

         .productItem>img:nth-child(2){
             margin: -3px 21px;
         }
         .productItem>img:first-child{
             position: absolute;
             width: 48px;
             height: 48px;
         }
         .productItem>img:nth-child(2):hover{
             width: 189px;
             height: 189px;
             cursor: pointer;
         }

         .productItem>.title{
             font-size: 14px;
             width: 100%;
             text-align: center;
             border-top: 2px solid #f4f0eb;
         }
         .productItem>.name{
             margin: 0;
            /* margin: 5px 71px 5px 71px; */
         }
         .productItem>.title>.Target{
            width: 100%;
             margin: 1px 11.5px 4px 0px;
             font-size: 12px;
         }
         .productItem>.title>.Target>span{
             margin:2px;
            color: white;
             background-color:#E36844 ;
         }
         
    </style>
</head>
<body>
    <div class="popularity">
        <div class="header">
            <h3 class="name">人气推荐</h3>
            <div class="headerLeft checked">编辑推荐</div>
            <div class="headerLeft">热销总榜</div>
            <div class="headerRight">更多推荐></div>
        </div>
        <div class="product">
            <div id="productItemFirst" class="productIerm">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/0736325df88942d67a31b5bd5bb2a502.png?type=webp&quality=95&thumbnail=320x320&imageView" alt="">
                <div class="title">
                    <h4 class="name">无添加蔗糖，苏打饼干 360克</h4>
                    <p class="price">＄20.8</p>
                </div>
            </div>
            <div class="productItem">
                <img src="https://yanxuan.nosdn.127.net/static-union/1628213373854ca1.png" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/0dee0387a9cd03759b243bd4f887d223.png?type=webp&quality=95&thumbnail=180y180&imageView"" alt="">
                <div class="title">
                    <div class="Target"><span>3.8折</span></div>
                    <h4 class="name">666蔗糖，苏打饼干 360克</h4>
                    <p class="price">＄308</p>
                </div>
            </div>
            <div class="productItem">
            </div>
            <div class="productItem">4</div>
            <div class="productItem">5</div>
            <div class="productItem">6</div>
            <div class="productItem">8</div>
        </div>
    </div>
</body>
</html>